<template>
	<view class="container">
		
		<u-swipe-action
			class="collect-list" 
			v-if="collectList.length > 0" 
			v-for="(item, index) in collectList" 
			:index="index" 
			:key="item.goodsId" 
			:show="item.show"
			@content-click="goGoodsDetail(item.goodsId)"
			@click="bindClick" 
			@open="open" 
			:options="options"
		>
			<view class="item u-border-bottom">
				<image mode="aspectFill" :src="item.pic" />
				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="title-wrap">
					<text class="title u-line">{{ item.goodsName }}</text>
					<text class="description">{{ item.description }}</text>
					<text class="price">￥ {{ item.price }}</text>
				</view>
			</view>
		</u-swipe-action>
		
		<u-empty v-if="collectList.length == 0"  text="暂无收藏" mode="favor"></u-empty>
		
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>

	import {
		getCollectList,
		delCollectByGoodsId
	} from "@/api/collect.js";
	export default {
		data() {
			return {
				collectList: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#fa3534'
					},
				}]
			};
		},
		components: {},
		props: {},
		methods: {
			getCollectList() {
				let that = this;
				getCollectList().then(res => {
					this.collectList = res.data.map(item => {
						item.show = false
						return item
					})
				})
			},
			// 导航到商品详情页
			goGoodsDetail(goodsId) {
				this.$u.route('/pages/goods-detail/goods-detail', {
					goodsId: goodsId
				})
			},
			bindClick(index, optionsIndex) {
				if (optionsIndex == 0) { // 点击删除
					delCollectByGoodsId(this.collectList[index].goodsId).then(res => {
						this.getCollectList();
						this.$refs.uToast.show({
							title: '取消收藏成功',
							type: 'success'
						})
					})
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.collectList[index].show = true;
				this.collectList.map((val, idx) => {
					if(index != idx) {
						this.collectList[idx].show = false;
					}
				})
			}
		},
		onLoad(options) {

		},
		onReady() {
			this.getCollectList();
		}
	}
</script>

<style lang="scss" scoped>
	@import "./my-collect.scss";
</style>
